Tagged with #local server - Processing 2.x and 3.x Forum

Using Windows : Uncaught TypeError / ReferenceError. But works great on Unix

Mostly_Yoshi — Wed, 08 Nov 2017 01:27:54 +0000

I'm trying to (in a very rudimentary way) port a project from Unix to Windows and receiving errors. (Both using the same ide, Sublime) The app runs fine on my Unix environment but not Windows with the same code.

:(( TypeError "cannot read property 'prototype' of undefined"
at setup (sketch.js:8) at p5. (p5.js:44882) at p5. (p5.js:44810) at new p5 (p5.js:45103) at _globalInit (p5.js:46862)

:(( ReferenceError "createSlider is not defined" at p5.dom.js:71 at p5.dom.js:34 at p5.dom.js:35

I'm using the exact code from Shiffman's YouTube walkthrough: Coding Challenge #14: Fractal Trees - Recursive.
Is there a caveat to working on Windows ?

Updates :
I tried using my XAMPP server too. It still doesn't work.
I might have to try the WAMP server.
Also, I uploaded the page to my BlueHost site to no avail. I received the exact same errors. I've used both CDN and downloaded files for p5.dom.js and p5.js

Help playing sketches on the web

GeorgeRoland — Fri, 27 Oct 2017 02:35:07 +0000

I am trying to create a processing sketch (processing 3.3.6) and play it in a web browser.

Here is my processing sketch:

        // myTrialWebSketch.pde
        int x;
        void setup() {
          size(200, 200);
          background(100);
          x = -27;
          println("Hello Web!");
        }

        void draw() {
          background(100);
          ellipse(x, 100, 30, 30);
          x = x + 5;
          if (x > 236) {
            x = -27;
          }
        }

I downloaded processing-1.4.8.js

Here is my .html file:




    Hello Web - Processing.js Test
    


    Processing.js Test
    This is my first a Processing.js web-based sketch:

The .html file. Processing .pde file and the processing-1.4.8.js are all in one directory. When I load the .html file into my browser, only the paragraph text shows up. My sketch doesn’t.

What am I doing wrong?

P5js How to load an image and subsequently alter it?

codedanddied — Tue, 03 Oct 2017 17:11:48 +0000

I am having issues loading an image from my sprites folder, which is in the same directory as my index.html.

    function draw() {
        background(255);
        image(loadImage("sprites/running0.png"), 0, 0);
    }

I'm receiving this error:

p5.js says: It looks like there was a problem loading your image. Try checking if the file path [file:///C:/Users/Pradeep/Documents/.../.../src/sprites/running0.png] is correct, hosting the image online, or running a local server.[https://github.com/processing/p5.js/wiki/Local-server] >

The source is correct so I have no idea what to do next since I think I'm correctly pointing it the file? Do I really have to run a private local server to circumnavigate security blocks? What are these security blocks that disable me from loading images if any?

Finally, once an image is loaded, is it possible to alter its pixel values, such as draw vertical and horizontal white lines across its entire image-width/image-length using simple for loops? I'm trying to do the same with a Python script (dependencies = matplotlib, scipy, numpy) but matplotlib saving figures is extremely awkward if you're just "editing images" rather than plotting mathematical stuff. If anyone knows any form of coding image pixel manipulation that is simpler please let me know! No I will not draw over my image using Paint. ;)

Ultimately I would like to load images such that my sprite (8 images) seems to run over draw:

    var i = 0;
    function draw() {
        background(255);
        image(loadImage("sprites/running" + i + ".png"), 0, 0);
        i++;
        if (i == 8) {
            i = 0;
        }
    }

Setting up local http-server

GiaFil7 — Sat, 30 Sep 2017 19:31:02 +0000

I am using Atom and I have downloaded the http-server "extension" from the terminal and it works fine. But it the "cd" command doesn't seem to work when I drag and drop a file from Atom. When I connect to the localhost, I get "Index of /" and a list of files and "directories". I don't know if this is because my "default" driver (located in C:), which is an SSD, is not where I have the file (I have it on an HDD located in E:). I will edit the post if switching the "default" to the HDD solves the issue.

Processingjs Download

ThatOnePandaGuy — Sat, 05 Aug 2017 16:40:31 +0000

I want to get into processingjs but im not sure how to download it. When i click on the download button it just brings me to lots of code. Im not sure what im suposed to do in this. I looked up on google and youtube on how to download it but it just shows me how to use processingjs. Any help would be grate to show me how to download processingjs.

how to run p5js in an html

P14082003 — Sun, 01 Jan 2017 20:39:15 +0000

how do you run a sketch inside an html file? i made a folder that has an index.html, theme.css and sketch.js(alongside its libraries (p5.js, p5.dom.js, p5.sound.js)

html = http://pastebin.com/kRXGVZKH

css = http://pastebin.com/vWx178ie

js = http://pastebin.com/UFUbh1Zu

p5.js preload()

MrDuck — Thu, 23 Mar 2017 21:33:57 +0000

I'm getting a cross origin error from browser whenever i'm trying to load anything from local storage in preload() function in this case i'm trying to load image "Access to Image at 'file:///home/p5/resource/bHeart.png' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access." is there any solutions to this or am i doing something wrong?

var heart; function preload(){ heart = loadImage("resource/bHeart.png"); } function setup(){ createCanvas(windowWidth,windowHeight); } function draw(){ background(0); image(heart,200,200); }

python server

tim50 — Mon, 20 Feb 2017 20:36:07 +0000

I'm a noob which means I don't know anything... I got the python server working (yahay) but now when I am in localhost, I don't see my files in the browser..... You know the blue files in the browser that you click on? I don't have those and I don't know how to get them to show up. I've seen them before so I don't think I have to download anything or do a bunch of stuff. Maybe I'm missing a dot somewhere?

This must happen to others? It seems pretty straight forward, no files in the browser when I use python's localhost which means I can't open my files when I use the local host because I don't know how to get them into the browser- you know the blue files you see when you use the localhost- the ones you click on? How do you get those to show up?

Also someone told me I don't need to use the server. I can just use firefox and it doesn't matter. Is that true? I just switched from safari to chrome (so as to use the python server as it didn't work that well in safari), and so I would just like to know how to get my blue files in the browser when I am on the local server. Am I missing a dot somewhere? You know your blue files on your computer when you use the server. They don't show up when I use local host 8000. It worked once so I think it isn't too major.

Someone must have run into this problem and probably just put a dot somewhere and viola there are your files and now you can click on them, right?

Thanks,

Loading a locally stored JSON file

mlandry — Wed, 08 Feb 2017 12:42:26 +0000

Hi, I'm trying to do a simple sketch using data from a JSON file to display flashcards. I did use JSON files in the past with no problem but now I get the following error in the chrome console :

XMLHttpRequest cannot load file:///C:/Users/matth/Documents/p5js/flashcard/cards.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Not sure what to do. Is that due to the recent security updates in chrome ?

Unable to run .PDE files on website

cygig — Sat, 04 Feb 2017 12:13:43 +0000

I've been looking at examples online on how to embed a PDE file in a website, however, I cannot seem to re-create the tutorials. Uploading my code to openprocessing forums seems to indicate my code is alright. I believe it has something rto do with file placements.

I've attached a zip file with my source file inside: https://drive.google.com/file/d/0B1EkhiMA92ATUXN1S2QxN3JweTQ/view?usp=sharing

HTML

http://www.w3.org/TR/html4/loose.dtd">  


Putting Processing on the web

    
 

 

Trying to put a .PDE down here...

Processing

float btnW=300, 
    btnH=100,
    btnX=0,
    btnY=0;
int r=0, g=0, b=255;
boolean btnState=false;

void setup(){
  size(800, 600);
  btnX=(width/2)-(btnW/2);
  btnY=(height/2)-(btnH/2);
 }

void draw(){
  background(0);
   fill(r,g,b);
   noStroke();
   rect(btnX, btnY, btnW, btnH);

 }

void mouseClicked(){
   println(mouseX+", "+mouseY);
   if(isClicked(btnX, btnY, btnW, btnH)){
    switchRect(); 
   }

 }

 void mouseDragged(){
  if(isClicked(btnX, btnY, btnW, btnH) && btnState){
    moveRect(); 
  }
 }

boolean isClicked(float x, float y, float w, float h){
  if(mouseX > x && mouseX < (x+w) && mouseY > y && mouseY< y+h){
   return true;
  }
  else { return false; }

 }

void switchRect(){
  btnState=!btnState;
  if (btnState==true){ r=255; g=0; b=0; }
  else { r=0; g=0; b=255; }   
}

void moveRect(){
  btnX=mouseX-btnW/2;
  btnY=mouseY-btnH/2;
}

Index.html says loading, does not display sketch

lola — Sun, 22 Jan 2017 04:26:37 +0000

I am using p5.js. In the sketch, I have a preload and the sketch displays when I run it through the p5.js editor. When I open it through the index.html link, it doesn't show, it just says "Loading..."

Why is this? and how to do I solve this?

Proper image file location format.

electricwool — Fri, 17 Jun 2016 00:16:05 +0000

On this particular sketch, when running through p5 editor it works fine. However, when going directly to the browser, it does not. Debugger says the media is not in the right folder.

file: https://we.tl/4fi9EMDOAC

Question.

what file location format should I use so people with my sketch can double click the index.html file and have the sketch run?

Example.

say for instance I have a sketch that uses images in a (media) folder.
loadImage("/media/image_name.png"); ---> works in p5 editor, not when using the browser.